<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../../stores/userStore';

// 切换菜单
const router = useRouter()
const route = useRoute()
// 登出
const userStore = useUserStore()
// 登出
const logout = () => {
  ElMessageBox.confirm('确认退出登录', '登出', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        userStore.logout()
        // 跳转到首页
        router.push({
          path:'/'
        })
      }
    },
  })
}

</script>

<template>
  <div class="flex relative flex-col  bg-gray-50 min-h-screen">
    <div
      style="background-color: #545c64;"
      class="w-full px-32 border-b-2 border-gray-600"
    >
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="w-full flex items-center justify-between"
        :default-active="route.name"
        text-color="#fff"
        mode="horizontal"
      >
        <el-menu-item
          @click="router.push('/admin/article')"
          index="article"
        >
          <template #title>
            <div class="px-10">
              <el-icon>
                <Notebook />
              </el-icon>
              <span>文章管理</span>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item
          @click="router.push('/admin/category')"
          index="category"
        >
          <template #title>
            <div class="px-10">
              <el-icon>
                <FolderOpened />
              </el-icon>
              <span>分类管理</span>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item
          @click="router.push('/admin/tag')"
          index="tag"
        >
          <template #title>
            <div class="px-10">
              <el-icon>
                <CollectionTag />
              </el-icon>
              <span>标签管理</span>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item
          @click="router.push('/admin/setting')"
          index="setting"
        >
          <template #title>
            <div class="px-10">
              <el-icon>
                <Setting />
              </el-icon>
              <span>设置</span>
            </div>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <router-view></router-view>
    <div @click="logout" class="absolute top-4 right-8 group">
    
      <svg
        t="1710591804620"
        class="w-8 h-8 hover:animate-bounce cursor-pointer"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9114"
      >
        <path
          d="M990.410486 511.991814 990.410486 511.991814 990.410486 511.991814 990.410486 511.991814zM488.481865 1022.310521 488.481865 1022.310521c-251.226788 0-454.892351-207.077266-454.892351-462.47812 0-193.325054 116.707049-358.866321 282.341437-427.981445l0 0.154519c4.923126-1.77339 10.184967-2.740414 15.69854-2.740414 25.977651 0 47.031153 21.429055 47.031153 47.840588 0 20.836561-13.0799 38.527478-31.363312 45.099151l0 0.063445c-129.070634 55.844889-219.614813 185.943946-219.614813 337.563132 0 202.576765 161.52786 366.796944 360.800369 366.796944 199.215204 0 360.739994-164.220179 360.739994-366.796944 0-151.620209-90.512457-281.719266-219.582067-337.563132l0-0.063445c-18.252713-6.571672-31.365358-24.26259-31.365358-45.099151 0-26.412556 21.086248-47.840588 47.062875-47.840588 5.480828 0 10.774391 0.964978 15.665795 2.740414l0-0.154519c165.66918 69.115124 282.343483 234.657414 282.343483 427.981445C943.346587 815.232233 739.7107 1022.310521 488.481865 1022.310521zM488.481865 527.937994c-26.00528 0-47.060829-21.428032-47.060829-47.839565L441.421037 197.038632l0 0L441.421037 100.329033l0 0L441.421037 49.529043c0-26.41358 21.055548-47.840588 47.060829-47.840588 25.977651 0 47.033199 21.428032 47.033199 47.840588l0 143.522788 0 95.681176 0 191.364399C535.515065 506.509962 514.459516 527.937994 488.481865 527.937994z"
          p-id="9115"
          fill="#e6e6e6"
        ></path>
      </svg>
    
    </div>
  </div>

</template>

<style
  scoped
  lang='scss'
></style>